<template>
  <div class="content">
    <div class="content-view edit-view">222</div>
    <div class="content-view show-view">
      <div class="phone-view">
        <div class="msg-show">
          <div class="header">
            <div class="header-log">
              <div>22:01</div>
              <div style="z-index: 2;position: relative;width: 120px;">
                <div style="position: absolute;font-size: 34px;width: 80px;text-align: center;top: 4px;left: 23px;color: #313131;z-index: 2;">95</div>
                <img style="position: absolute;left: 27px;top: 48px;" src="@/assets/power.jpg" width="80" height="40">
              </div>
            </div>
            <div class="header-name">覃小姐</div>
            <div class="msg-body">
              <div class="msg-time msg-item" style="padding: 18px 0;">3月24日 11:35</div>
              <div class="msg-you msg-item">
                <div class="msg-touxiang" />
                <div class="msg-arr"></div>
                <div class="you-msg msg-box">公司名称</div>
              </div>
              <div class="msg-me msg-item">
                <div class="me-msg msg-box">今天下午不行了，下午所有部门负责人要开例会。估计一个下午都没空了</div>
                <div class="msg-arr"></div>
                <div class="msg-touxiang" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.content {
  display: flex;
  height: 100%;

  .content-view {
    padding: 20px;
  }

  .edit-view {
    width: 60%;
    min-width: 500px;
  }

  .show-view {
    width: 40%;
    min-width: 400px;

    .phone-view {
      transform: scale(0.34);
      transform-origin: 0% 0%;

      .msg-show {
        position: relative;
        width: 1186px;
        height: 2560px;
        background-color: #ededed;
        background-image: url('@/assets/msg.jpg');
        background-size: cover;
        background-position: center;

        .header-log {
          color: #474747;
          height: 124px;
          line-height: 124px;
          padding: 0 50px;
          font-size: 45px;
          font-weight: 600;
          display: flex;
          justify-content: space-between;
        }

        .header-name {
          height: 130px;
          line-height: 130px;
          text-align: center;
          font-size: 51px;
          font-weight: 500;
        }

        .msg-body::-webkit-scrollbar {
          display: none;
        }

        .msg-body {
          margin-top: 10px;
          // border: 1px solid #929292;
          height: 2126px;
          overflow-y: auto;

          .msg-item{
            margin: 10px 0;
            padding: 18px 34px;
            .msg-touxiang{
              height: 120px;
              width: 120px;
              border-radius: 10px;
              background-size: cover;
              background-position: center;
            }
            .msg-arr{
              width: 28px;
              height: 28px;
              box-sizing: border-box;
              border-radius: 3px;
              margin-top: 46px;
              transform: rotate(45deg);
              transform-origin: center;
            }
            .msg-box{
              font-size: 52px;
              border-radius: 10px;
              padding: 20px 28px;
              color: #0b1b00;
              max-width: 756px;
              letter-spacing: -2px;
            }
          }

          .msg-time {
            height: 80px;
            line-height: 80px;
            color: #888888;
            text-align: center;
            font-size: 36px;
          }

          .msg-you {
            display: flex;

            .msg-touxiang {
              margin-right: 23px;
              background-image: url('@/assets/tx1.jpg');
            }

            .msg-arr {
              background-color: #fff;
              margin-right: -18px;
            }

            .you-msg {
              background-color: #fff;
            }
          }

          .msg-me {
            display: flex;
            justify-content: end;

            .msg-touxiang {
              margin-left: 23px;
              background-image: url('@/assets/tx2.jpg');
            }

            .msg-arr {
              background-color: #95ec69;
              margin-left: -18px;
            }

            .me-msg {
              background-color: #95ec69;
            }
          }
        }
      }
    }
  }
}
</style>